import React from 'react';
import { Box, useMediaQuery } from '@chakra-ui/react';
import NickModal from '../ui/NickModal';
import Pravila from '../ui/Pravila';

export default function MainPage(): JSX.Element {
  const [isLargerThanPhone] = useMediaQuery('(min-width: 800px)');

  const mainContainerStyle: React.CSSProperties = {
    backgroundImage: isLargerThanPhone
      ? 'url(/img/фон.png)'
      : 'url(/img/main-mob.png)',
    backgroundSize: 'cover',
    backgroundRepeat: 'no-repeat',
 
    height: '100vh',
  };

  return (
    <Box style={mainContainerStyle}>
      <NickModal />

      <Pravila />
    </Box>
  );
}
